<template>
	<view class="cardBag">
		<view class="card-title">宠物身份证</view>
		<view class="card-list">
			<view class="card-item flex-a flex-b" v-for="(item,index) in list" :key="item.id">
				<view class="flex-a">
					<view>
						<image :src="item.petPhoto" mode="widthFix"></image>
					</view>
					<view>
						<view class="title">{{item.petName}}</view>
						<view class="txt">{{item.petDate}}</view>
						<view class="txt">{{item.petSex==0?'弟弟':'妹妹'}}</view>
					</view>
				</view>
				<view>
					<uni-icons type="right" size="20" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<button type="primary" @click="receive">领取宠物身份证</button>
	</view>
</template>

<script>
	import {getPetInfoList} from '../../../api/pet.js'
	export default {
		data() {
			return {
				list:[]
			}
		},
		created() {
			this.getPetInfoList()
		},
		methods: {
			//获取列表
			getPetInfoList(){
				getPetInfoList().then(res=>{
					if(res.code==200){
						this.list=res.data
					}
				})
			},
			//领取
			receive(){
				uni.navigateTo({
					url:'/pages/users/petsID/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	body {
		height: 100%;
		background: $uni-bg-color-grey;
	}
.cardBag{
	padding: 20rpx;
	.card-title{
		margin-bottom: 20rpx;
	}
	.card-list{
		.card-item{
			height: 150rpx;
			border-radius: 10rpx;
			background: rgba(0, 0, 0, 0.3);
			color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				background: darkred;
				margin-right: 20rpx;
			}
			.title{
				font-size: 28rpx;
				margin-bottom: 5rpx;
			}
			.txt{
				font-size: 20rpx;
			}
		}
	}
	button {
		width: calc(100% - 40rpx);
		background: #1777FF;
		height: 80rpx;
		line-height: 80rpx;
		letter-spacing: 8rpx;
		font-size: 30rpx;
		position: fixed;
		bottom: 20rpx;
	}
}
</style>
